<template>
  <div class="">
    <div class="banxin">
      <div class="flxe titles">
        <h2>{{ pTit }}</h2>
        <div class="radus">{{ pData.length }}</div>
      </div>
      <TodoItem
        :i-data="item"
        v-for="item in pData"
        :key="item.id"
        :ref="'item' + item.id"
      >
        <input
          type="button"
          class="edit"
          :value="edit ? '编辑' : '取消编辑'"
          slot="edit"
          @click="show(item.id)"
        />
        <input
          type="button"
          class="edit del"
          slot="dele"
          value="删除"
          v-if="item.ischx"
          @click="del(item)"
        />
      </TodoItem>
    </div>
  </div>
</template>
 
<script>
import TodoItem from "./TodoItem";
import "../css/index.css";
export default {
  data() {
    return {
      edit: true,
    };
  },
  props: ["pTit", "pData"],
  components: {
    TodoItem,
  },
  methods: {
    del(item) {
      // delete
      if (!confirm("删除？"))
       return;

      this.$store.commit("delete", item.id);
    },
    show(id) {
      this.$refs["item" + id][0].checkShow(id);
      this.edit = !this.edit;
    },
  },
};
</script>
 
<style lang = "less" scoped>
</style>